<template>
  <div>
    <!-- 人员列表 -->
    <!-- 搜索  -->

    <div class="flex justify-content mb-10 align-items">
      <div>
        <span class="returnList">
          < 返回列表</span>
      </div>
      <div>
        <el-button
          type="primary"
          @click="printClick"
        >打印表单</el-button>
        <el-button>编辑</el-button>
      </div>
    </div>
    <!-- @current-change="handleCurrentChange" :header-cell-style="{
           'backgroundColor':'#eff4ff' 
            }"-->
    <!-- 表格 -->
    <!-- <div>
      <el-table
        id="singleTable"
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        style="width: 100%"
        :max-height="maxheight"
        :span-method="objectSpanMethod"
        :header-cell-style="handerMethod"
      >
        <el-table-column
          label="计量器具类别"
          align="center"
          property="type"
        >
        </el-table-column>

        <el-table-column
          label="计量目的"
          align="center"
          property="mudi"
        >
        </el-table-column>
        <el-table-column
          label="计量目的"
          align="center"
          property="mudi1"
        >
        </el-table-column>
        <el-table-column
          property="address"
          label="进出口用能单位"
          align="center"
        >
          <el-table-column
            property="address"
            label="准确度等级要求"
            align="center"
          >
          </el-table-column>
          <el-table-column
            property="address"
            label="实际准确度等级"
            align="center"
          >
          </el-table-column>
        </el-table-column>

        <el-table-column
          property="address"
          align="center"
          label="进出主要次级用能单位"
        >
          <el-table-column
            property="address"
            label="准确度等级要求"
            align="center"
          >
          </el-table-column>
          <el-table-column
            property="address"
            label="实际准确度等级"
            align="center"
          >
          </el-table-column>
        </el-table-column>

        <el-table-column
          property="address"
          align="center"
          label="主要用能射比"
        >
          <el-table-column
            property="address"
            label="准确度等级要求"
            align="center"
          >
          </el-table-column>
          <el-table-column
            property="address"
            label="实际准确度等级"
            align="center"
          >
          </el-table-column>
        </el-table-column>

        <el-table-column
          property="address"
          align="center"
          label="其他"
        >
          <el-table-column
            property="address"
            label="准确度等级要求"
            align="center"
          >
          </el-table-column>
          <el-table-column
            property="address"
            label="实际准确度等级"
            align="center"
          >
          </el-table-column>
        </el-table-column>

      </el-table>

    </div> -->

    <div>
      <table
        id="singleTable"
        border="1"
        width="100%"
        cellspacing="0"
      >
        <thead>
          <tr style="height:40px">
            <th
              rowspan="2"
              style="width:10%"
            >计量器具类别</th>
            <th
              style="width:15%"
              colspan="2"
              rowspan="2"
            >计量目的</th>
            <th
              colspan="2"
              style="width:15%"
            >进出口用能单位</th>
            <th
              colspan="2"
              style="width:15%"
            >进出主要次级用能单位</th>
            <th
              colspan="2"
              style="width:15%"
            >主要用能射比</th>
            <th
              colspan="2"
              style="width:15%"
            >其他</th>
          </tr>
          <tr style="height:40px">
            <th>准确度等级要求</th>
            <th>实际准确度等级</th>
            <th>准确度等级要求</th>
            <th>实际准确度等级</th>
            <th>准确度等级要求</th>
            <th>实际准确度等级</th>
            <th>准确度等级要求</th>
            <th>实际准确度等级</th>
          </tr>
        </thead>
        <tr>
          <td>衡器</td>
          <td>燃料的静态计量</td>
          <td>燃料的静态计量</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
          <td>0</td>
        </tr>
      </table>
    </div>

  </div>
</template>

<script>
import ResizeMixin from '@/layout/mixin/ResizeHandler'
import print from 'print-js'

export default {
  mixins: [ResizeMixin],
  name: 'counterAccuracyListDetails',

  data() {
    return {

      tableData: [
        {
          type: '衡器',
          mudi: '燃料的静态计量',
          mudi1: '燃料的静态计量',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          type: '衡器',
          mudi: '燃料的动态计量',
          mudi1: '燃料的动态计量',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'

        }, {
          type: '电能表',
          mudi: '有功交流 电能计量',
          mudi1: 'Ⅰ类用户',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          type: '电能表',
          mudi: '有功交流 电能计量',
          mudi1: 'Ⅱ类用户',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'

        }, {
          type: '电能表',
          mudi: '有功交流 电能计量',
          mudi1: 'Ⅲ类用户',

          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          type: '电能表',
          mudi: '有功交流 电能计量',
          mudi1: 'Ⅳ类用户',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'

        }, {
          type: '电能表',
          mudi: '有功交流 电能计量',
          mudi1: 'Ⅴ类用户',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'

        }, {
          type: '电能表',
          mudi: '直能电流计量',
          mudi1: '直能电流计量',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'

        }, {
          type: '油流量表(装置)',
          mudi: '液体能源计量',
          mudi1: '液体能源计量',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'

        }, {
          type: '油流量表(装置)',
          mudi: '液体能源计量',
          mudi1: '液体能源计量',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'
        },
        {
          type: '气流体量表(装置)',
          mudi: '液体能源计量',
          mudi1: '液体能源计量',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'


        },
        {

          type: '水流量表(装置)',
          mudi: '水计量',
          mudi1: '管径不大于250MM',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'

        },
        {
          type: '水流量表(装置)',
          mudi: '水计量',
          mudi1: '管径大于250MM',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'
        },
        {
          type: '温度仪表',
          mudi: '用于液态，气态的能源电量',
          mudi1: '用于液态，气态的能源电量',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'

        },
        {
          type: '温度仪表',
          mudi: '与气体、蒸汽质量计算相关的 温度计量',
          mudi1: '与气体、蒸汽质量计算相关的 温度计量',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'
        },
        {
          type: '温度仪表',
          mudi: '用于液态，气态的能源电量',
          mudi1: '用于液态，气态的能源电量',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'

        },
        {
          type: '温度仪表',
          mudi: '与气体、蒸汽质量计算相关的 温度计量',
          mudi1: '与气体、蒸汽质量计算相关的 温度计量',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'
        },

      ],
      currentRow: null,
      maxheight: window.innerHeight - 220, //表格动态高度

    };
  },

  mounted() {
    //监听表格高度
    this.$_tableOnresize()

  },
  activated() {

  },
  methods: {
    //合并表头
    handerMethod({ row, column, rowIndex, columnIndex }) {
      if (row[1].level === 1) {
        // 这里有个非常坑的bug 必须是row[0]=0 row[1]=2才会生效
        row[1].colSpan = 0

        row[2].colSpan = 2

        if (columnIndex === 1) {

          return { display: 'none' }

        }


      }
      return { backgroundColor: '#eff4ff' }
    },

    //合并行和列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(row, column, rowIndex, columnIndex);
      if (columnIndex === 0) {
        if (rowIndex === 0) {  // 合并第一行到第四行，从第一行开始，共4行
          return {
            rowspan: 2,
            colspan: 1
          }
        } else if (rowIndex === 2) { // 合并第五行到第九行，从第五行开始，共5行
          return {
            rowspan: 6,
            colspan: 1
          }
        } else if (rowIndex === 8) { //  合并第10行到第14行，从第10行开始，共5行
          return {
            rowspan: 2,
            colspan: 1
          }
        } else if (rowIndex === 10) { //  合并第10行到第14行，从第10行开始，共5行
          return {
            rowspan: 1,
            colspan: 1
          }
        } else if (rowIndex === 11) { //  合并第10行到第14行，从第10行开始，共5行
          return {
            rowspan: 2,
            colspan: 1
          }
        } else if (rowIndex === 13) { //  合并第10行到第14行，从第10行开始，共5行
          return {
            rowspan: 2,
            colspan: 1
          }
        } else if (rowIndex === 15) { //  合并第10行到第14行，从第10行开始，共5行
          return {
            rowspan: 2,
            colspan: 1
          }
        } else { //  合并第10行到第14行，从第10行开始，共5行
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }

      if (columnIndex === 1) {
        if (rowIndex === 0) {
          return {
            rowspan: 1,
            colspan: 2
          };
        } else if (rowIndex === 1) {
          return {
            rowspan: 1,
            colspan: 2
          };
        } else if (rowIndex === 2) {
          return {
            rowspan: 5,
            colspan: 1
          };
        } else if (rowIndex === 7) {
          return {
            rowspan: 1,
            colspan: 2
          };
        } else if (rowIndex === 8) {
          return {
            rowspan: 2,
            colspan: 2
          };
        } else if (rowIndex === 10) {
          return {
            rowspan: 1,
            colspan: 2
          };
        } else if (rowIndex === 11) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else if (rowIndex === 13) {
          return {
            rowspan: 1,
            colspan: 2
          };
        } else if (rowIndex === 14) {
          return {
            rowspan: 1,
            colspan: 2
          };
        } else if (rowIndex === 15) {
          return {
            rowspan: 1,
            colspan: 2
          };
        } else if (rowIndex === 16) {
          return {
            rowspan: 1,
            colspan: 2
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      if (columnIndex === 2) {
        if (rowIndex === 0) {
          return {
            rowspan: 1,
            colspan: 0
          };
        } else if (rowIndex === 1) {
          return {
            rowspan: 1,
            colspan: 0
          };
        } else if (rowIndex === 2) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else if (rowIndex === 3) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else if (rowIndex === 4) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else if (rowIndex === 5) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else if (rowIndex === 6) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else if (rowIndex === 7) {
          return {
            rowspan: 1,
            colspan: 0
          };
        } else if (rowIndex === 8) {
          return {
            rowspan: 0,
            colspan: 0
          };
        } else if (rowIndex === 10) {
          return {
            rowspan: 1,
            colspan: 0
          };
        } else if (rowIndex === 11) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else if (rowIndex === 12) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else if (rowIndex === 13) {
          return {
            rowspan: 1,
            colspan: 0
          };
        } else if (rowIndex === 14) {
          return {
            rowspan: 1,
            colspan: 0
          };
        } else if (rowIndex === 15) {
          return {
            rowspan: 1,
            colspan: 0
          };
        } else if (rowIndex === 16) {
          return {
            rowspan: 1,
            colspan: 0
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }




    },
    //打印
    printClick() {
      const style = `

`
      printJS({
        printable: 'singleTable',// 标签元素id
        type: 'html',
        scanStyles: false,
      });
      //各个配置项
      //printable:要打印的id。
      //type:可以是 html 、pdf、 json 等。
      //properties:是打印json时所需要的数据属性。
      //gridHeaderStyle和gridStyle都是打印json时可选的样式。
      //repeatTableHeader:在打印JSON数据时使用。设置为时false，数据表标题将仅在第一页显示。
      //scanStyles:设置为false时，库将不处理应用于正在打印的html的样式。使用css参数时很有用，此时自己设置的原来想要打印的样式就会失效，在打印预览时可以看到效果
      //targetStyles: [’*’],这样设置继承了页面要打印元素原有的css属性。
      //style:传入自定义样式的字符串，使用在要打印的html页面 也就是纸上的样子。
      //ignoreElements：传入要打印的div中的子元素id，使其不打印。非常好用
    },
  }

};
</script>

<style lang="scss" scoped>
::v-deep .el-input-group__append {
  background-color: #1455f0;
  color: #fff;
  border: none;
}

.returnList {
  color: #1455f0;
  font-size: 14px;
  cursor: pointer;
}

// 原生样式
table {
  border-color: #f2f4f7;
  text-align: center;
  width: 100%;
}
td,
th {
  // border: 1;
  font-size: 14px;
  color: #2b2b2b;
  font-weight: normal;
}

th {
  background-color: #eff4ff;
}

@media print {
  body {
    margin: 0;
    padding: 0;
  }
}
</style>
